import { createApp } from "vue";
import App from "./App";
import router from "./router/index.js";

let instance = null;
const render = () => {
  instance = createApp(App);
  instance.use(router).mount("#app");
};

// 如果当前不是在微前端的环境
if (!window.__MICRO_WEB__) {
  render();
}

export const bootstrap = () => {
  console.log("vue3-bootstrap");
};

export const mount = () => {
  window.a = 1; // js沙箱的测试变量
  // vue3 -> vue2 先有监听，在有触发
  /**
   * 这里我们要注意一个监听和触发的时机，如果说我们从 vue3 向 vue2 里面去传递数据，这个时候呢就会存在一种情况就是我们的下一个子应用是完全没有加载过的我们就没有自己的监听事件，
   * 如果我们在 vue3 里面直接做了当前 test2 的触发就会出现 vue2 里面监听不到的情况，这个呢我们也在上一节课里面跟大家做了一个具体的实现，这种情况呢我们就需要先在 vue2 里面
   * 添加我们 vue2 的监听事件，添加完成之后可以vue3去发一个事件告诉它当前你可以去触发test2的事件了因为现在我有这个监听了，那么这样呢我们vue3才做这样一个事件的触发
   * 所以说呢我们需要在vue3里面做一个test1的监听，然后呢再在监听的回调方法里面我们在触发这样一个参数，
   * 那么这样呢我们就在vue2里面可以获取到我们传递过去的这个data的内容，
   * 这里呢是一个时机的问题大家在使用的时候就可以稍微注意一下。
   * 如果说当前我是在 vue2 向vue3 里面传递内容，相当于是我从下一个子应用向上一个子应用传递内容，
   * 这个时候我们可以保证我们上一个子应用里一定会有它的这个监听事件，
   * 这个时候呢我们从下一个应用里向我们上一个应用里触发这个事件的时候它是一定会存在的，所以说我们这个时候直接通过 window.custom.emit 来触发就可以
   */

  // window.custom.emit('test', {a: 1}); // 通过 vue3 向主要用传递的信息 （CustomEvent 自定义事件）
  window.custom.on('test1', (data) => {
    console.log('test1', data); // {a: 1}
    window.custom.emit('test2', {
      b: 2
    });
  });
  // 也就是说当前我们在主应用里添加了我们的事件订阅，然后呢子应用里修改我们store的数据，那这个时候我们的主应用是可以接收到我们所有的修改，我们也可以根据这些修改做一些其它的操作
  const storeData = window.store.getStore(); // 全局状态管理 - 全局store
  // 更新store的数据，我们传入的是一个完整的store
  window.store.update({
    ...storeData,
    a: 11
  });
  render();
  console.log("vue3-mount");
};

export const unmount = () => {
  console.log("vue3-unmount", instance);
};
